<template>
  <div>
    <h2>当前记数：{{sum}}</h2>
    <button @click="sum++">记数加1</button>
    <h2>你好啊{{msg}}</h2>
    <button @click="msg+='!'">消息提示</button>
    <h2>{{data.name}}今年{{data.age}}岁了</h2>
    <button @click="data.name+='y'">改名了</button>
    <button @click="data.age++">长大了</button>
    <h2>工作是{{data.job.jobName}},工资{{data.job.salary}}K</h2>
    <button @click="data.job.jobName+='高级'">升职</button>
    <button @click="data.job.salary++">涨工资</button>
  </div>
</template>

<script>
import {ref,  reactive, watch, watchEffect } from 'vue';
export default {
  name: 'Demo',
  // watch: {
  //   sum(){
  //     console.log("监听到sum改变", this.sum)
  //   },
  //   msg(){
  //     console.log("监听到msg改变", this.msg)
  //   },
  // },
  setup(){
    let sum = ref(0)
		let msg = ref('hello')

    let data = reactive({
        name: "rock",
        age: 18,
        job: {
          jobName: "前端工程师",
          salary: 10
        }
    })


// 一
    //情况一：监视ref所定义的一个响应式数据,,{immediate:true}上来就直接监听
    // watch(sum, (newValue,oldValue) => {
    //   console.log("监听到sum改变", newValue,oldValue)
    // },{immediate:true})

    //情况二：监视ref所定义的多个响应式数据
    // watch([sum, msg], (newValue,oldValue) => {
    //   console.log("监听到sum和msg改变", newValue,oldValue)
    // },{immediate:true})
  
    /* 
      情况三：监视reactive所定义的一个响应式数据的全部属性
          1.注意：此处无法正确的获取oldValue
          2.注意：强制开启了深度监视（deep配置无效）{deep:false}无效
    */
    // watch(data, (newValue,oldValue) => {
    //   console.log("监听到data改变", newValue,oldValue)
    // },{deep:false})

    //情况四：监视reactive所定义的一个响应式数据中的某个属性
    // watch(() => data.age, (newValue,oldValue) => {
    //   console.log("监听到data.age改变", newValue,oldValue)
    // })

    //情况五：监视reactive所定义的一个响应式数据中的某些属性
    // watch([() => data.name, () => data.age], (newValue,oldValue) => {
    //   console.log("监听到data的name,age改变", newValue,oldValue)
    // })

    //特殊情况, 此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 */
    // watch(() => data.job, (newValue,oldValue) => {
    //   console.log("监听到data.job改变", newValue,oldValue)
    // }, {deep: true})


// 二
    // let data = ref({
    //     name: "rock",
    //     age: 18,
    //     job: {
    //       jobName: "前端工程师",
    //       salary: 10
    //     }
    // })

    // data, ref
    // console.log(data)
    // watch(sum, (newValue,oldValue) => {
    //   console.log("监听到sum改变", newValue,oldValue)
    // })
    // watch(data, (newValue,oldValue) => {
    //   console.log("监听到data改变", newValue,oldValue)
    // }, {deep:true})


// 三
    //监视
    // watch(sum, (newValue,oldValue) => {
    //   console.log("监听到sum改变", newValue,oldValue)
    // })
    watchEffect(() => {
      const x1 = sum.value
      const x2 = data.job.salary
      console.log('watchEffect所指定的回调执行了')
    })

    return{
      sum,
      msg,
      data
    }
  }
}
</script>

<style>

</style>
